<template>
    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button @click="addProduct">添加</el-button>
    </div>

    <!-- table表格部分 -->
    <el-table :data="tableData" border cell-class-name="center">
        <el-table-column class-name="center" prop="id" label="编号"> </el-table-column>
        <el-table-column class-name="center" prop="name" label="类型名称"> </el-table-column>
        <el-table-column class-name="center" prop="attributeCount" label="属性数量"> </el-table-column>
        <el-table-column class-name="center" prop="paramCount" label="参数数量"> </el-table-column>
        <el-table-column class-name="center" label="设置">
            <template #default="scope">
                <el-button @click="router.push(`/pms/productAttrList?cid=${scope.row.id}&cname=${scope.row.name}&type=0`)">
                    属性列表
                </el-button>
                <el-button @click="router.push(`/pms/productAttrList?cid=${scope.row.id}&cname=${scope.row.name}&type=1`)">
                    参数列表
                </el-button>
            </template>
        </el-table-column>
        <el-table-column class-name="center" label="操作">
            <template #default="scope">
                <el-button @click="editHandle(scope.row.id,scope.row.name)">
                    编辑
                </el-button>
                <el-button type="danger" @click="delFn(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChagne"
            @current-change="currentChagne" :page-sizes="[5, 10, 15]" />
    </ElConfigProvider>
    <!-- 添加属性弹出对话框 -->
    <EditProduct :show="showEditProduct" @hide="hideClose" @refresh="getList" :id="editId" :data="editdata" />
</template>
<script setup lang='ts'>
import EditProduct from './components/EditProduct.vue'
import { user } from "@/api"
import { reactive, ref, toRefs } from 'vue'
import { Tickets } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from "vue-router";

const router = useRouter()
interface IState {
    tableData: cateModel[];
    listParams: IUserListParams;
    total: number
}
const state = reactive<IState>({
    tableData: [],
    listParams: {
        pageNum: 1,
        pageSize: 5,
    },
    total: 0
})

// 封装请求
const getList = () => {
    // 搜索跟之前第一次请求的不同就是 搜索要带 输入框里面的数据
    user.getListProductApi(state.listParams).then((res) => {
        if (res.code === 200) {
            state.tableData = res.data.list;
            state.total = res.data.total;
        }
    });
};
// 一开始的时候需要先调用一次
getList();

const pageSizeChagne = (val: number) => {
    getList();
}

const currentChagne = (val: number) => {
    getList();
}

let { tableData, listParams, total } = toRefs(state)

const showEditProduct = ref(false);

// 编辑的id
const editId = ref(0);
// 编辑名称
const editdata = ref('')

// 点击添加
const addProduct = () => {
    showEditProduct.value = true;
}

//  点击编辑
const editHandle = (id: number,data:string) => {
    editId.value = id;
    editdata.value = data;
    // 把编辑框显示出来
    showEditProduct.value = true;
};
// 点击取消
const hideClose = () => {
    showEditProduct.value = false
}

// 点击删除
const delFn = (id:number) => {
    ElMessageBox.confirm("是否要删除该品牌","提示",{
        type: "warning",
                confirmButtonText: "确定",
                cancelButtonText: "取消"
    }).then(() => {
        user.IDelProductApi(id).then((res) => {
        if(res.code === 200) {
            ElMessage.success("删除成功！")
            getList();
        }
    })
    })
}
</script>
<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }

    .el-button {
        margin-right: 10px;
    }
}

:deep(.center) {
    text-align: center;
}

.el-pagination {
    margin-top: 20px;
    float: right;
}
</style>